<template>
  <view class="join_list">
    <z-paging ref="paging" v-model="dataList" @query="queryList">
      <template #top>
        <z-nav-bar id="nav" bgColor="#ffffff" :title="certificationType==='team'?'团体卡申请明细':'加盟申请明细'" >
        </z-nav-bar>
        <up-sticky offset-top="0">
          <view class="df top_sel justify-between">
            <view class="df align-center"   @click="show = true">
              <text class="top_sel_text mgr-12">年月:</text>
              <up-input

                style="width: 240rpx"
                v-model="timeText"
                :disabled="true"
                disabledColor="#fff"
                placeholder="请选择年月"
              ></up-input>
            </view>
            <view class="df align-center" @click="showPicker= true">
              <text class="top_sel_text mgr-12">审核状态:</text>
              <up-input
                style="width: 240rpx"
                v-model="statusText"
                :disabled="true"
                disabledColor="#fff"
                placeholder="请选择审核状态"
              ></up-input>
            </view>

          </view>
        </up-sticky>
      </template>

      <view class="apply-cell-box">
        <block v-for="(item,index) in dataList" :key="index">
          <navigator :url="`/pagesShop/franchiseStores/join_progress?id=${item.id}`">
            <view class="apply-cell flex-center-between">
              <view class="flex-a-center">
<!--                <image src="/static/logo.png" mode=""></image>-->
                <view class="right">
                  <text>
                    {{item.storeName || item.companyName}}
                    <text v-if="certificationType==='team'">申请店铺：{{item.larghStoreFullName}}</text>
                  </text>
                  <view><text style="margin-right: 20rpx"  v-if="certificationType==='team'">申请人:{{item.createUserName}}</text> {{item.createTime}}</view>
                </view>
              </view>
              <view class="right-txt flex-a-center">
                <view class="txt" v-if="item.status==1 ||item.status == 0">
                  待审核
                </view>
                <view class="txt" v-if="item.status==2">
                  审核成功
                </view>
                <view class="txt" style="color: #d9001b" v-if="item.status==3">
                  已拒绝
                </view>
                <view class="txt" style="color: #d9001b" v-if="item.status==4">
                  已退回
                </view>
                <back :isRight="true" :borderColor="'#999'" :borderWidth="'3rpx'" :padding="'5rpx 0 0'"></back>
              </view>
            </view>
          </navigator>
        </block>
      </view>
    </z-paging>
    <up-datetime-picker
      ref="datetimePickerRef"
      v-model="datetime"
      :show="show"
      @cancel ="show = false"
      @close="close"
      @confirm="confirmDatetime"
      :closeOnClickOverlay="true"
      mode="year-month"
      :formatter="formatter"
    ></up-datetime-picker>
    <up-picker
      @cancel ="showPicker = false"
      @close="close"
      keyName="label"
      :closeOnClickOverlay="true"
      :show="showPicker"
      @confirm="confirmStatus"
      :columns="columns">
    </up-picker>
  </view>
</template>
<script setup>
import { ref, reactive } from 'vue'
import { onReady,onLoad } from '@dcloudio/uni-app'
import {qryIndexList} from '@/api/home'
import {certificationUserList} from '@/api/pagesShop'
import {useCustomStores} from '@/utils/hook'
import {groupList} from '../../api/pagesShop'
const {ShopStore} = useCustomStores()
const dataList = ref([])
const paging = ref(null)
const datetimePickerRef=ref(null)
const show = ref(false);
const showPicker =  ref(false)
const certificationType = ref('')
const columns = reactive([
  [
    {
      label: '待审核',
      value: '1'
    }, {
    label: '已通过',
    value: '2'
  }, {
    label: '已拒绝',
    value: '3'
  },
  ]

]);
let searchInfo = reactive({
  status:"",
})
const timeText = ref('')
const timeRang = reactive({})
const statusText = ref('')
const datetime = ref(new Date())
// PENDING("1", "待审核"),
//   APPROVED("2", "已通过"),
//   REJECTED("3", "已拒绝"),
//   RETURNED("4", "已退回");

const queryList = (pageNo, pageSize) => {
  // 此处请求仅为演示，请替换为自己项目中的请求
//判断一下如果是团体的申请得走别的接口

  if(certificationType.value === 'team'){
    groupList({
      pageNum:pageNo,
      pageSize:pageSize,
      ...timeRang,
      ...searchInfo
    }).then(res=>{
      paging.value.complete(res)
    })
  }else {
    certificationUserList({
      certificationType : certificationType.value,
      pageNum:pageNo,
      pageSize:pageSize,
      ...timeRang,
      ...searchInfo
    }).then(res=>{
      paging.value.complete(res)
    })

  }

}
const formatter = (type, value) => {
  if (type === 'year') {
    return `${value}年`;
  }
  if (type === 'month') {
    return `${value}月`;
  }
  return value;
};
const confirmDatetime =(e)=>{
  const timeInfo  =  timestampToYearMonth(e.value)
  timeText.value =  timeInfo.label
   const {    firstDay, lastDay} =    getMonthFirstAndLastDay(timeInfo.value)
  timeRang.startTime = firstDay
  timeRang.endTime = lastDay

  show.value = false
  paging.value.reload()
}
function getMonthFirstAndLastDay(dateStr) {
  // 解析年月
  const [year, month] = dateStr.split('-').map(Number);

  // 获取当月第一天
  const firstDay = `${year}-${String(month).padStart(2, '0')}-01`;

  // 获取当月最后一天
  let lastDay;
  if (month === 2) {
    // 处理2月份，需要判断是否闰年
    const isLeapYear = (year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0);
    lastDay = `${year}-02-${isLeapYear ? '29' : '28'}`;
  } else if ([4, 6, 9, 11].includes(month)) {
    // 30天的月份
    lastDay = `${year}-${String(month).padStart(2, '0')}-30`;
  } else {
    // 31天的月份
    lastDay = `${year}-${String(month).padStart(2, '0')}-31`;
  }

  return {
    firstDay,
    lastDay
  };
}
const confirmStatus =(e)=>{
  searchInfo.status= e.value[0].value
  statusText.value = e.value[0].label
  console.log(e.value[0])
  paging.value.reload()
  showPicker.value = false
}
function timestampToYearMonth(timestamp) {
  // 创建一个Date对象，传入时间戳
  const date = new Date(timestamp);

  // 获取年份
  const year = date.getFullYear();

  // 获取月份，注意月份是从0开始的，所以需要加1
  const month = date.getMonth() + 1;

  // 返回格式化后的年月字符串
    return {
      label: `${year}年${month}月`,
      value: `${year}-${month}`
  }
}
const close =()=>{
  show.value = false
  showPicker.value =false
}
onReady(() => {
  // 微信小程序需要用此写法
  datetimePickerRef.value.setFormatter(formatter);
});
onLoad((options)=>{
 if(options.certificationType){
   certificationType.value = options.certificationType
 }
})
</script>

<style lang="scss" scoped>
@import "../style/common.scss";
.join_list{
width: 100%;
  .top_sel{
    box-sizing: border-box;
    padding: 32rpx ;
    width: 100%;
    background-color: #FFFFFF;
    .top_sel_text{
      font-size: 28rpx;
    }

  }

}
.apply-cell-box{
  width: 702rpx;
  background-color: #fff;
  margin: 12rpx 24rpx 32rpx;
  border-radius: 16rpx;
  .apply-cell{
    width: 638rpx;
    border-bottom: 1rpx solid rgba(229, 229, 229, 0.6);
    border-radius: 0;
    margin: 0 32rpx;
    padding: 32rpx 0;
    .right-txt{
      color: #15B951;
      view.txt{
        margin-right: 4rpx;
      }
    }
  }
}

</style>
